'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { Button, Card, Col, Divider, Layout, Row, Space, Tag, Typography, message } from 'antd';
import {
  BookOutlined,
  CrownOutlined,
  GithubOutlined,
  GlobalOutlined,
  RocketOutlined,
  ThunderboltOutlined,
  ProjectOutlined,
  TeamOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import ProjectImportModal from '../components/ProjectImportModal';

const { Header, Content, Footer } = Layout;
const { Title, Paragraph, Text } = Typography;

export default function Home() {
  const [importModalVisible, setImportModalVisible] = useState(false);

  // 处理导入成功
  const handleImportSuccess = (results: any[]) => {
    const successCount = results.filter(r => r.success).length;
    const failCount = results.filter(r => !r.success).length;
    
    if (failCount === 0) {
      message.success(`成功导入 ${successCount} 个项目！`);
    } else {
      message.warning(`导入完成：成功 ${successCount} 个，失败 ${failCount} 个`);
    }
  };

  return (
    <Layout className="min-h-screen">
      <Header className="bg-white shadow-sm border-b">
        <div className="max-w-6xl mx-auto flex items-center justify-between h-full">
          <div className="flex items-center space-x-3">
            <RocketOutlined className="text-2xl text-blue-600" />
            <Title level={3} className="!mb-0 !text-gray-800">
              PingCode Web
            </Title>
          </div>
          <Space>
            <Link href="/work-items">
              <Button type="text" icon={<ProjectOutlined />}>
                工作项管理
              </Button>
            </Link>
            <Link href="/projects">
              <Button type="text" icon={<ProjectOutlined />}>
                项目管理
              </Button>
            </Link>
            <Link href="/members">
              <Button type="text" icon={<TeamOutlined />}>
                成员管理
              </Button>
            </Link>
            <Link href="/workloads">
              <Button type="text" icon={<ProjectOutlined />}>
                工时查询
              </Button>
            </Link>
            <Button 
              type="text" 
              icon={<UploadOutlined />}
              onClick={() => setImportModalVisible(true)}
            >
              导入项目
            </Button>
          </Space>
        </div>
      </Header>

      <Content className="bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="max-w-6xl mx-auto py-16 px-4">
          {/* Hero Section */}
          <div className="text-center mb-16">
            <Title
              level={1}
              className="!text-5xl !mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
            >
              现代化 Web 开发平台
            </Title>

            <Space size="large" wrap>
              <Link href="/work-items">
                <Button type="primary" size="large" icon={<ProjectOutlined />} className="h-12 px-8">
                  工作项管理
                </Button>
              </Link>
              <Link href="/projects">
                <Button size="large" icon={<ProjectOutlined />} className="h-12 px-8">
                  项目管理
                </Button>
              </Link>
              <Link href="/members">
                <Button size="large" icon={<TeamOutlined />} className="h-12 px-8">
                  成员管理
                </Button>
              </Link>
              <Link href="/workloads">
                <Button size="large" icon={<ProjectOutlined />} className="h-12 px-8">
                  工时查询
                </Button>
              </Link>
              <Button 
                size="large" 
                icon={<UploadOutlined />} 
                className="h-12 px-8"
                onClick={() => setImportModalVisible(true)}
              >
                导入项目
              </Button>
            </Space>
          </div>

          {/* Features Section */}
          <Row gutter={[24, 24]} className="mb-16">
            <Col xs={24} sm={12} lg={8} xl={4.8}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300 border-0 shadow-md"
                styles={{ body: { padding: '2rem' } }}
              >
                <Link href="/work-items">
                  <div className="text-center cursor-pointer">
                    <ProjectOutlined className="text-4xl text-blue-500 mb-4" />
                    <Title level={4} className="!mb-3">
                      工作项管理
                    </Title>
                    <Paragraph className="text-gray-600">
                      管理项目中的任务、需求、缺陷等工作项，支持状态跟踪和优先级设置。
                    </Paragraph>
                  </div>
                </Link>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={8} xl={4.8}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300 border-0 shadow-md"
                styles={{ body: { padding: '2rem' } }}
              >
                <Link href="/projects">
                  <div className="text-center cursor-pointer">
                    <ProjectOutlined className="text-4xl text-green-500 mb-4" />
                    <Title level={4} className="!mb-3">
                      项目管理
                    </Title>
                    <Paragraph className="text-gray-600">
                      创建和管理项目，设置项目信息、成员权限和项目配置。
                    </Paragraph>
                  </div>
                </Link>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={8} xl={4.8}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300 border-0 shadow-md"
                styles={{ body: { padding: '2rem' } }}
              >
                <Link href="/members">
                  <div className="text-center cursor-pointer">
                    <TeamOutlined className="text-4xl text-purple-500 mb-4" />
                    <Title level={4} className="!mb-3">
                      成员管理
                    </Title>
                    <Paragraph className="text-gray-600">
                      管理团队成员信息，分配角色权限和查看成员活动状态。
                    </Paragraph>
                  </div>
                </Link>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={8} xl={4.8}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300 border-0 shadow-md"
                styles={{ body: { padding: '2rem' } }}
              >
                <Link href="/workloads">
                  <div className="text-center cursor-pointer">
                    <ThunderboltOutlined className="text-4xl text-orange-500 mb-4" />
                    <Title level={4} className="!mb-3">
                      工时查询
                    </Title>
                    <Paragraph className="text-gray-600">
                      查询和统计团队成员的工作时间，生成工时报表和分析。
                    </Paragraph>
                  </div>
                </Link>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={8} xl={4.8}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300 border-0 shadow-md"
                styles={{ body: { padding: '2rem' } }}
              >
                <div className="text-center cursor-pointer" onClick={() => setImportModalVisible(true)}>
                  <UploadOutlined className="text-4xl text-red-500 mb-4" />
                  <Title level={4} className="!mb-3">
                    导入项目
                  </Title>
                  <Paragraph className="text-gray-600">
                    从 Markdown 文件批量导入项目，自动创建项目并分配管理员权限。
                  </Paragraph>
                </div>
              </Card>
            </Col>
          </Row>


        </div>
      </Content>



      {/* 项目导入模态框 */}
      <ProjectImportModal
        visible={importModalVisible}
        onCancel={() => setImportModalVisible(false)}
        onSuccess={handleImportSuccess}
      />
    </Layout>
  );
}
